<template>
  <a-modal
    title="请选择审批人"
    :visible="visible"
    ok-text='确定'
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form-model ref='form' :model='queryParam' :rules='validatorRules'>
      <a-form-model-item label='年份' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='year'>
        <a-date-picker
          mode="year"
          placeholder="请选择年份"
          format='YYYY'
          value-format="yyyy-MM-dd"
          v-model='queryParam.year'
          :open='yearPickShow'
          style='width: 100%'
          @panelChange="handlePanelChange"
          @openChange="handleOpenChange"/>
      </a-form-model-item>
      <a-form-model-item label='季度' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='quarter'>
        <j-dict-select-tag style='width: 100%' v-model="queryParam.quarter" placeholder="请选择" dict-code="sys_quarter"/>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'UserModal',
  components: {

  },
  data() {
    return {
      queryParam:{
        year:'',
        quarter:''
      },
      yearPickShow: false,
      visible:false,
      validatorRules: {
        year: [{ required: true, message: '请选择年度!' }],
        quarter: [{ required: true, message: '请输入季度!' }]
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
    }
  },
  created() {

  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.visible = false
          this.$emit('openModelView',this.queryParam)
          this.queryParam = {}
        } else {
          return false
        }
      })
    },
    handleCancel(e) {
      this.queryParam = {}
      this.visible = false;
    },
    moment,
    // 得到年份选择器的值
    handlePanelChange(value) {
      this.yearPickShow = false
      this.queryParam.year = moment(value).format('YYYY')
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
  }
}
</script>

<style scoped>

</style>
